<template>
  <view class="video">
    <scroll-view scroll-x enable-flex class="scroll_x">
      <view class="video_tag"><uni-segmented-control :current="current" :values="videoTag" style-type="text" active-color="#fb6485" @clickItem="onClickItem" /></view>
    </scroll-view>    
    <scroll-view scroll-y class="scroll_y">
      <view class="video_container" v-for="(item, i) in videoTag" :key="i">
        <view v-if="current === i">
          <view class="content" v-for="item in videoInfo" @click="navTovideoDetail(item.data.vid ? item.data.vid : item.data.id,item.type)">
            <image :src="item.data.coverUrl" mode="widthFix"></image>
            <text class="iconfont icon-bofang-copy"></text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      current: 0,
      videoTag: [],
      currentId: [],
      videoId: [],
      videoUrl: [],
      // coverImgUrl:[],
      videoInfo: []
    }
  },
  onLoad() {
    this.getVideoCateTag()
  },
  methods: {
    ...mapMutations(['UpdateVideoId']),
    async getVideoCateTag() {
      const { data: res } = await uni.$http.get('video/category/list')
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('视频标签列表获取失败')
      res.data.forEach(item => {
        this.videoTag.push(item.name)
        this.currentId.push(item.id)
      })
      // console.log(this.videoTag);
      // console.log(this.currentId);
      this.getCateVideo(res.data[this.current].id)
      // console.log(res.data[this.current].id)
    },
    async getCateVideo(id) {
      const { data: res } = await uni.$http.get('video/group', { id: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('视频列表获取失败')
      this.videoInfo = res.datas
      // let promiseList=[]
      // let functionList=[]
      // res.datas.forEach(item => {
      //   this.videoId.push(item.data.vid?item.data.vid:item.data.id)
      // var vvv=this.getVideoUrl(item.data.vid)
      // console.log(vvv);
      // this.videoUrl.push(vvv)
      // })
      // console.log(this.videoUrl)
      // let promiseList = []
      // let functionList = []
      // res.datas.forEach((item, index) => {
      //   if (functionList.length < 6) {
      //     functionList.push(this.getVideoUrl(item.data.vid))
      //     console.log(functionList);
      //   } else if (index == res.datas.length - 1) {
      //     promiseList.push(functionList)
      //     functionList = []
      //   } else {
      //     promiseList.push(functionList)
      //     functionList = []
      //   }
      // })
      // console.log(promiseList)
      // let resList = []
      // promiseList.forEach(async (item, index) => {
      //   let res = await Promise.all(item)
      //   resList.push(res)
      //   console.log(resList);
      // })

      // this.getVideoUrl(this.videoId[2]);
    },

    onClickItem(e) {
      this.current = e.currentIndex
      // console.log(e);
      this.getCateVideo(this.currentId[this.current])
    },
    navTovideoDetail(id,type) {
      this.UpdateVideoId(id) 
      uni.navigateTo({
        url: '/subpkg/videoDetail/videoDetail?type=' + type
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll_x {
  white-space: nowrap;
  height: 90rpx;
}
.scroll_y {
  height: calc(100vh - 90rpx);
}
.video_tag {
  display: flex;
  white-space: nowrap;
}
/deep/.segmented-control{
  background-color: #eeeeef;
}
/deep/.segmented-control__item {
  margin-left: 40rpx;
}
.content {
  position: relative;
  margin-bottom: 50rpx;
}
.content image {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.content text {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 100rpx;
  height: 100rpx;
  width: 100rpx;
  transform: translate(-50%, -50%);
}

</style>
